import React, { memo } from "react";
import { Provider } from "react-redux";
// import { renderRoutes } from "react-router-config";
import { HashRouter, useRoutes } from "react-router-dom";

import routes from "./router";
import store from "./store";

import XJHAppHeader from "@/components/app-header";
import XJHAppFooter from "@/components/app-footer";
import XJHAppPlayBar from "./pages/player/app-player-bar";

function RouteElement() {
  const element = useRoutes(routes);
  return element;
}

export default memo(function App() {
  return (
    <Provider store={store}>
      <HashRouter>
        <XJHAppHeader></XJHAppHeader>
        <RouteElement></RouteElement>
        <XJHAppFooter></XJHAppFooter>
        <XJHAppPlayBar></XJHAppPlayBar>
      </HashRouter>
    </Provider>
  );
});
